<style>
	.content {
		border: 1px solid#999;
		border-radius: 16px;
		margin-bottom: 20px;
		padding: 10px;
	}

	.listItem1 {
		flex: 1;
		margin: 10px;
		background: #fff;
		padding: 10px;
		border-radius: 16px;
		text-align: center;
	}

	.listItem1 div {
		text-align: center;
	}

	.listTitle {
		background-image: linear-gradient(to right, #3a3ef4, #3a3ef4);
		color: #fff;
		border-radius: 40px;
		padding: 6px 10px;
		margin: 10px 0;
	}
</style>
<template>
	<div>
		<div class="displayFlexBet bgfff pad10" style="margin-bottom: 10px;border-radius:8px">
			<div></div>
			<el-button @click="visible1 = true,isStart = true,editData=''" icon="el-icon-plus" type="primary"
				size="mini">新增排口</el-button>
		</div>

		<div class="displayFlexBet pad10 bgfff color555" style="border-radius:8px">
			<div style="flex:3">排口</div>
			<div style="flex:3" class="">编号</div>
			<div style="flex:3" class="">排放类型</div>
			<div style="flex:3" class="">处置工艺</div>
			<div style="flex:3" class="">污染物</div>
			<div style="flex:2" class="">在线检测</div>
			<div style="flex:2" class="">状态</div>
			<div style="flex:1" class="">操作</div>
		</div>

		<div class="bgfff mt10" style="border-radius:8px">
			<div class="displayFlexBet pad10 color555 point" v-for="(item,index) in dataList" :key="index"
				style="border-bottom:1px solid#F8F7F9" @click="gotoEdit(item)">
				<div style="flex:3">{{item.waterOutletName}}</div>
				<div style="flex:3" class="">{{item.waterOutletNo}}</div>
				<div style="flex:3" class="textOver">{{item.waterOutletApproachStr}}</div>
				<div style="flex:3" class="textOver">{{item.techDesc}}</div>
				<div style="flex:3" class="">
					<span v-for="(item2,index2) in item.pollutionList">{{item2.pollutionName}};</span>
				</div>
				<div style="flex:2" class="">
					<span v-if="item.isOnlineMonitor">有</span>
					<span v-else style="color:#EE2C28">无</span>
				</div>
				<div style="flex:2" class="">
					<div v-if="item.busiStatus == 'IN_USE'" class="displayFlexBet pad10"
						style="width: 80px;height: 28px;background: #E6F7E9;border-radius: 14px">
						<div style="width: 13px;height: 13px;background: #4CD964;border-radius: 50%;"></div>
						<div class="color000" style="font-weight:500">使用中</div>
					</div>
					<div v-else class="displayFlexBet pad10"
						style="width: 80px;height: 28px;background: #FAE6E6;border-radius: 14px">
						<div style="width: 13px;height: 13px;background: #EF5350;border-radius: 50%;"></div>
						<div class="color000" style="font-weight:500">停用</div>
					</div>
				</div>
				<div style="flex: 1;display: flex;align-items: flex-start;">
					<img v-if="item.busiStatus !='NOT_USE'" src="@/assets/sIcon82.png"
						style="cursor: pointer;width: 18px;height: 18px;" @click.stop="updateBusiStatus(item)">
					</img>
					<div v-else
						style="background: #FAE6E6;padding: 4px 10px;color:#EF5350;border-radius: 20px;"
						class="font12 point" @click.stop="updateBusiStatus(item)">重启</div>
				</div>
			</div>
		</div>

		<!--新增基础信息-->
		<el-dialog :visible.sync="visible1" :close-on-click-modal="false" top="2%" title="排口信息" :zIndex="99" width="70%">
			<addInfoIndex v-if="visible1" @success="addBaseSuccess" @cancle="visible1 = false,isStart = false"
				:editData="editData" @deleteSuccess="visible1 = false,getWaterOutletBaseList()" />
		</el-dialog>

		<!--新增污染物种类信息-->
		<el-dialog :visible.sync="visible2" :close-on-click-modal="false" title="污染物信息" top="5%" width="30%">
			<addWaste v-if="visible2" @success="addSuccess(2)" @cancle="visible2 = false" :outletId="outletId"
				:editData="editData" />
		</el-dialog>

		<!--新增辅材信息-->
		<el-dialog :visible.sync="visible4" :close-on-click-modal="false" title="辅料信息">
			<addMateria v-if="visible4" @success="addSuccess(4)" @cancle="visible4 = false" :outletId="outletId"
				:editData="editData" />
		</el-dialog>

		<!--新增参数信息-->
		<el-dialog :visible.sync="visible5" :close-on-click-modal="false" title="参数信息" width="80%">
			<addParamter v-if="visible5" @success="addSuccess(5)" @cancle="visible5 = false" :outletId="outletId"
				:editData="editData" />
		</el-dialog>


	</div>
</template>

<script>
	import addInfoIndex from '@/components/wasteWater/addInfoIndex'
	import addSecondProdut from '@/components/wasteWater/addSecondProdut'
	import addMateria from '@/components/wasteWater/addMateria'
	import addWaste from '@/components/wasteWater/addWaste'
	import addParamter from '@/components/wasteWater/addParamter'
	let that

	export default {
		components: {
			addInfoIndex,
			addSecondProdut,
			addMateria,
			addWaste,
			addParamter
		},
		data() {
			return {
				params: {
					facilitatorId: '',
					ticketId: '',
					subjectId: ''
				},
				editData: '',
				outletId: '',
				visible1: false,
				visible2: false,
				visible3: false,
				visible4: false,
				visible5: false,
				isStart: false,
				dataList: []
			}
		},

		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.getWaterOutletBaseList()
		},

		methods: {
			
			updateBusiStatus(item) {
				let noticeText = "是否停用此排口"
				if (item.busiStatus == 'NOT_USE') noticeText = "是否启用此排口"
				this.$alert(noticeText, '', {
					confirmButtonText: '确定',
					callback: action => {
						if (action == "confirm") {
							that.ajax({
								url: '/waterOutlet/updateBusiStatus?ticketId=' + that.params.ticketId,
								data: {
									outletId: item.id
								},
								contentType: 'application/x-www-form-urlencoded',
								success: function(result) {
									if (result.data) {
										if (item.busiStatus == 'NOT_USE') item.busiStatus = "IN_USE"
										else item.busiStatus = "NOT_USE"
									}
								},
							})
						}
					}
				});
			},
			
			gotoEdit(item){
				that.$router.push("/wasteWater/outletInfo?ticketId=" + that.params.ticketId + "&outletId=" + item.id)
			},
			handleEdit(item) {
				that.visible2 = true
				that.outletId = item.id
				that.editData = item
			},

			addBaseSuccess(value) {
				that.outletId = value
				that.visible1 = false
				// that.visible2 = true
				that.getWaterOutletBaseList()
			},

			addSuccess(step) {
				// if (that.isStart) {
				// 	if (step == 4) {
				// 		that.isStart = false
				// 		that.visible4 = false
				// 		return that.getWaterOutletBaseList()
				// 	}
				// 	that['visible' + (step + 1)] = true
				// }
				that['visible' + step] = false
				that.getWaterOutletBaseList()
			},

			getWaterOutletBaseList() {
				that.ajax({
					url: '/waterOutlet/getWaterOutletBaseList?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						facilitatorId: that.params.facilitatorId,
						ticketId: that.params.ticketId,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data
						}
					},
				})
			},


		}
	}
</script>


<style scoped>
	.display_Flex_Bet {
		display: flex;
		justify-content: space-between;
	}
</style>